<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/layer/3.0.1/layer.js"></script>
	<style>
		.zhch-class {border: 1px solid #a4c024;}
		.zhch-class .layui-layer-btn{/*border-top:1px solid #E9E7E7*/;/*background-color: #00aa65*/;}
		.zhch-class .layui-layer-title {background-color: #a4c024;color: #fff;font-weight: bold;}
		.zhch-class .layui-layer-btn0 {background-color: #a4c024;border: none;}
		.msg .layui-layer-content { background: red; padding: 30px 20px;}
		   
		   
		
	</style>
</head>
<body>
	<div id="test" style="cursor:pointer">点击弹出layer哦，哈哈！</div>
	<div id="asdf">点击测试content</div>
	<script>
		$(function() {
			$('#test').on('click',function() {
				layer.config({
				    skin: 'zhch-class'
				})
				var zcTestLayer = layer.open({
					title:['信息提示','font-size:18px;/*color:red;*/'],//解开注释可生效
					// type:0,
					content:'卧了个槽',
					moveEnd:function() {
						console.log('瞎拖动啥啊，关掉');
					},
					yes:function(a,b) { // 默认的确定按钮的回调，添加 btn后默认第一个按钮的回调
						console.log('本次弹框的事件监听');
						console.log(a);
						console.log(b);
						console.log(this);
						console.log(layer);
						layer.close(layer.index);
						// layer.close(a);
					},
					btn:['zc-btn01','zc-btn02'],//将覆盖掉原有的确定按钮
					btn2:function(qwe) {
						console.log(qwe);
						return false;//回调完毕后不关闭layer
					},
					cancel:function(w) { //点击右上角关闭按钮的回调
						console.log('这是在不刷新页面的情况下的第'+w+'次弹出layer-zctest20170804，也是索引值');
					},
					closeBtn:2,//false不展示关闭按钮,true展示关闭按钮（不准确有坑），有两种风格，可通过1/2来配置
					// shade:0,//去掉遮罩层
				});
				console.log('本次layer实例的index是：'+zcTestLayer);
			})

			$('#asdf').on('click',function() {
				layer.open({
			        content: 'hbcsbscbjhsc办陈水扁上传此生不换进步三次安慰 比较好成本价变成女生比较市场初步设计阿插件是成本基本vdjs'
			        , skin: 'msg'
			        , time: 20000 //2秒后自动关闭
			    })
			})
			
		});

	</script>

</body>
</html>